<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form ref="form" :model="form" :show-message="false" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="事业部名称" prop="dname" required>
            <el-input
              v-model.trim="form.dname"
              placeholder="请输入事业部名称"
              :maxLength="12"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事业部联系人" prop="contacts">
            <el-input
              v-model.trim="form.contacts"
              placeholder="请输入联系人"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model.trim="form.phone"
              placeholder="请输入联系电话"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要业务场景" prop="busineScene" required>
            <div style="position: relative;">
              <el-select
                v-model="form.busineScene"
                placeholder="请选择主要业务场景"
                clearable
                style="width:100%;"
                :disabled="!!form.id"
              >
                <el-option
                  v-for="dict in dict.type.business_scene"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <div style="position: absolute;bottom: -30px;left: -20px;white-space:nowrap;" class="color9">不同场景，其下属医疗机构登录后的首页不同</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="!form.id">
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="管理员姓名" prop="adminUser.nickName" required>
              <el-input
                v-model.trim="form.adminUser.nickName"
                placeholder="请输入管理员姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="adminUser.sex" required>
              <el-radio-group v-model="form.adminUser.sex">
                <el-radio
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理员手机号" prop="adminUser.phonenumber" required>
              <el-input
                v-model.trim="form.adminUser.phonenumber"
                placeholder="请输入管理员手机号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理员账号" prop="adminUser.userName" required>
              <el-input
                v-model.trim="form.adminUser.userName"
                placeholder="请输入管理员账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <!-- <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">平台抽佣设置</div>
        <div>
          <el-form-item label="咨询服务类" prop="tagName">
            <div class="disFlx">
              <div class="color6">我的抽佣比例</div>
              <div class="pl-10">
                <el-input-number
                  v-model="form.name"
                  :min="1"
                  :max="100"
                ></el-input-number>
              </div>
              <div class="pl-10 color6">%</div>
            </div>
            <div class="color9">
              说明：此处抽佣的基数为事业部每笔咨询订单所得收益
            </div>
          </el-form-item>
          <el-form-item label="药品服务类" prop="tagName">
            <div class="disFlx">
              <div class="color6">我的抽佣比例</div>
              <div class="pl-10">
                <el-input-number
                  v-model="form.name"
                  :min="1"
                  :max="100"
                ></el-input-number>
              </div>
              <div class="pl-10 color6">%</div>
            </div>
            <div class="color9">
              说明：此处抽佣的基数为事业部每笔商品服务类订单所得收益
            </div>
          </el-form-item>
        </div>
      </el-card> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDivision, updateDivision } from '@/api/facilitator';

export default {
  dicts: ["sys_user_sex", "business_scene"],
  data() {
    return {
      title: "新建事业部",
      open: false,
      form: {
        id: undefined,
        dname: "", // 事业部名称
        contacts: "", // 事业部联系人
        phone: "", // 联系电话
        busineScene: "", // 主要业务场景
        adminUser: {
          nickName: "", // 管理员姓名
          sex: '0', // 性别
          phonenumber: "", // 管理员手机号
          userName: "", // 管理员账号
        },
        divisionProfitList: []
      },
    };
  },
  methods: {
    openModal(row) {
      this.title = row && row.id ? "编辑事业部" : "新建事业部";
      this.open = true;
      if(row && row.id){
        this.form = {
          id: row.id,
          dname: row.dname, // 事业部名称
          contacts: row.contacts, // 事业部联系人
          phone: row.phone, // 联系电话
          busineScene: row.busineScene, // 主要业务场景
        }
      }
    },
    closeModal() {
      this.$refs["form"].resetFields();
      Object.assign(this.$data, this.$options.data()); // 存在自定义校验规则不能重置data
    },
    /** 提交按钮 */
    submitForm() {
      const that = this;
      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          if(that.form.id){
            await updateDivision(that.form)
          }else{
            await addDivision(that.form);
          }
          that.$message.success(that.form.id ? "修改成功" : "新增成功");
          that.$emit("refresh");
          that.closeModal();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
